<template>
	<view class="dish-preview-card bg-default">
		<!-- 图片 -->
		<image class="dish-image" :src="image" mode="aspectFill"></image>
		<!-- 详情 -->
		<view class="dish-detail">
			<!-- 菜名 -->
			<view class="dish-name">{{ name }}</view>
			<!-- 分类 -->
			<view class="dish-type">{{ type }}</view>
			<!-- 介绍 -->
			<view class="dish-desc">{{ description }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'DishPreviewCard',
		props: {
			image: {
				type: String,
				default: '../../static/icons/no-image.svg'
			},
			name: {
				type: String,
				default: '名称'
			},
			type: {
				type: String,
				default: '分类'
			},
			description: {
				type: String,
				default: '暂无'
			},
		},
		data() {
			return {};
		},
	};
</script>

<style scoped>
	.dish-preview-card {
		display: flex;
	}

	.dish-image {
		width: 300rpx;
		height: 300rpx;
	}

	.dish-detail {
		flex: 1;
		padding-left: 24rpx;
	}

	.dish-name {
		margin-top: 48rpx;
		margin-bottom: 16rpx;
		font-size: 18px;
		color: #1b1b1b;
	}

	.dish-type {
		margin-bottom: 16rpx;
		font-size: 16px;
		color: #414141;
	}

	.dish-desc {
		/* height: 100rpx; */
		font-size: 14px;
		color: #585858;

		max-height: 130upx;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 3;
		/** 显示的行数 **/
	}
</style>